React Hook
- 컴포넌트에 기능을 추가할 때 사용하는 함수다. (react v16.8에 추가되었다.)
- 컴포넌트에 상태 값을 추가하거나 자식 요소에 접근하는 등의 기능을 추가하고 싶을 때 훅을 사용하면 된다.
- 리액트 훅이 나오기 전에는, 클래스형 컴포넌트를 사용했다. 리액트 훅이 클래스형 컴포넌트를 대체할 수 있으며 장점이 많다.
hook 사용 시 지켜야 할 규칙
1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야한다. 2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.
- 이 두개의 규칙을 지켜야, 리액트가 각 상태를 정확하게 파악할 수 있다. 리액트는 훅이 사용된 위치 정보를 기반으로 훅 데이터를 관리하기 때문이다.
- 1번 규칙에 의해, if문이나 for문 안에서 훅을 사용하면 안된다.(if문이나 for문의 반복횟수에 의해 훅이 항상 똑같이 진행된다는 것을 보장할 수 없기 때문이다.)
- 1번 규칙에 의해, 일반 함수 안에서 훅을 호출하면 안된다. 함수가 항상 호출된다는 보장이 없기 때문이다.
React 내장 훅
- useState
- useEffect
- useContext
- useRef
- useMemo
- useCallback
- useReducer
- useImperativeHandle
- useLayoutEffect
- useDebugValue
- useMemo와 useCallback은 메모이제이션 기능을 제공한다. 따라서 이전 값을 재활용할 수 있다.
- useReducer는 여러 개의 상태 값을 하나의 훅으로 관리할 때 편리한 기능을 제공해준다.
- useImperativeHandle 훅은, 함수형 컴포넌트가 인스턴스로 만들어지진 않지만,함수형 컴포넌트에서도 클래스형 처럼 내부의 함수와 변수에 접근할 수 있다.
